<template>
    <h2>信息显示</h2>
    房型名称
    <input type="text" v-model="query.names">
    状态
    <input type="radio" v-model="query.zztt" name="zt" value="1">启用
    <input type="radio" v-model="query.zztt" name="zt" value="2">停用
    <input type="button" value="查询" @click="querys">
    <a href="/">重置</a>
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>房型名称</th>
                <th>门市销售价格</th>
                <th>房间数</th>
                <th>状态</th>
                <th>房间号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-for="a in data">
            <tr>
                <th>{{a.hid}}</th>
                <th>{{a.hname}}</th>
                <th>￥{{a.picture}}</th>
                <th>{{a.fjs}}</th>
                <th>{{a.zt?"启用":"停用"}}</th>
                <th>{{a.fjh}}</th>
                <th>
                    <input type="button" value="逻辑删除" @click="delee(a.hid)">
                    <input type="button" value="编辑" @click="updatt(a.hid)">
                </th>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="button" value="首页" @click="fyy(1)">
        <input type="button" value="上一页" @click="fyy(2)">
        <input type="button" v-for="a in fzhong.pagecount" :value="a" @click="ffz(a)">
        <input type="button" value="下一页" @click="fyy(3)">
        <input type="button" value="尾页" @click="fyy(4)">
        页容量
        <select v-model="query.PageSize" @change="querys">
            <option value="2">2页/条</option>
            <option value="3">3页/条</option>
            <option value="4">4页/条</option>
            <option value="5">5页/条</option>
        </select>
        跳转到
        <input type="text" v-model="query.PageIndex">
        <input type="button" value="跳转" @click="shoow">
        总共{{ fzhong.pagecount }}页,当前第{{ query.PageIndex }}页,共{{ fzhong.count }}条,
        每页{{ query.PageSize }}条
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
onMounted(()=>{
    shoow()
})


//编辑
const updatt=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}




//逻辑删除
const delee=(val:any)=>{
    if(confirm('确认删除吗'))
{
    axios.delete("https://localhost:7093/api/VS/Delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert('删除成功')
        shoow()
    }
    else
    {
        alert('删除失败')
        return;
    }
    })
}
}


//查询
const query=ref({
    names:"",
    zztt:0,
    PageIndex:1,
    PageSize:2
})

const querys=()=>{
    query.value.PageIndex=1;
    shoow()
}

//分页
const fzhong=ref({
    count:0,
    pagecount:0
})

const fyy=(val:any)=>{
if(val==1)
{
    query.value.PageIndex=1;
    shoow()
}
if(val==2)
{
    if(query.value.PageIndex>1)
{
    query.value.PageIndex-=1;
    shoow()
}
}
if(val==3)
{
    if(query.value.PageIndex<fzhong.value.pagecount)
{
    query.value.PageIndex+=1;
    shoow()
}
}
if(val==4)
{
    query.value.PageIndex=fzhong.value.pagecount;
    shoow()
}
}


const ffz=(a:any)=>{
    query.value.PageIndex=a;
    shoow()
}



//显示
const data=ref([{
    "hid": 0,
      "hname": "",
      "picture": "",
      "fjs": "",
      "zt": 0,
      "fjh": "",
      //"deleteID": false
}])


const shoow=()=>{
    if(query.value.PageIndex*0!=0)
{
    alert('不得输入非法字符')
    return;
}
    axios.get("https://localhost:7093/api/VS/Show",{params:query.value}).then(res=>{
        data.value=res.data.list;
        fzhong.value.count=res.data.count;
        fzhong.value.pagecount=Math.ceil(fzhong.value.count/query.value.PageSize);
    })
}
</script>

<style scoped>

</style>